<div class="l-thread-chart-wrap" [style.height.px]="lastHeight" [hidden]="hiddenComponent">
    <div ppResizeTop [minHeight]="minHeight" [maxHeightPadding]="maxHeightPadding" class="l-title-group font-opensans">
        <div class="l-title">
            <span class="fas fa-chart-area"></span>Active Request
        </div>
        <div class="l-tool-box">
            <button class="fas fa-thumbtack" [class.l-pin-up]="isPinUp" (click)="onPinUp()"></button>
            <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
        </div>
    </div>
    <div class="l-chart-group-wrap font-opensans">
        <ng-container *ngIf="activeRequestCounts">
            <article class="l-total-chart">
                <pp-real-time-total-chart
                        [timeStamp]="timeStamp"
                        [timezone]="timezone$ | async"
                        [dateFormat]="dateFormat$ | async"
                        [sum]="sum"
                        [activeRequestCounts]="arcForTotal">
                </pp-real-time-total-chart>
            </article>
            <article class="l-agent-chart">
                <pp-real-time-chart-header
                        [activeOnly]="activeOnly"
                        [totalCount]="totalCount"
                        (outOpenPage)="onOpenPage($event)"
                        (outChangeActiveOnlyToggle)="onChangeActiveOnlyToggle($event)">
                </pp-real-time-chart-header>
                <pp-real-time-agent-chart
                        [timeStamp]="timeStamp"
                        [activeRequestCounts]="arcForAgent"
                        [sum]="sum"
                        (outOpenThreadDump)="onOpenThreadDump($event)"
                        (outRenderCompleted)="onRenderCompleted()">
                </pp-real-time-agent-chart>
            </article>
        </ng-container>
        <ng-container [ngSwitch]="messageTemplate">
            <div class="l-message l-waiting" *ngSwitchCase="'LOADING'">
                <h4><span>Waiting Connection...</span></h4>
                <i class="fas fa-spinner fa-spin fa-2x fa-fw"></i>
            </div>
            <div class="l-message l-retry" *ngSwitchCase="'RETRY'">
                <h4><span>Closed connection</span></h4>
                <button type="button" class="pinpoint-btn" (click)="onRetryConnection()"><span><i
                        class="fas fa-redo"></i></span> Retry
                </button>
            </div>
            <div class="l-message l-no-data" *ngSwitchCase="'NO_DATA'">
                <h4><span>This node is not WAS</span></h4>
            </div>
            <ng-container *ngSwitchDefault></ng-container>
        </ng-container>
    </div>
</div>
